
<template>
  <div id="login">
    <img
      class="close"
      @click="returnRouter"
      src="../../assets/image/images/loginImg/关闭.png"
      alt="关闭"
    />
    <h3>使用手机号登录</h3>
    <div class="table">
      <div class="area">
        <div>
          <span>国家/地区</span>
          <span>中国</span>
        </div>
        <img src="../../assets/image/images/loginImg/more.png" alt="more" />
      </div>
      <p>
        <span>+86</span>
        <span>
          <input type="text" placeholder="请填写手机号码" v-model="userId"
        /></span>
      </p>
      <p>
        <span>密码</span>
        <span
          ><input type="password" placeholder="请填写密码" v-model="password"
        /></span>
      </p>
      <div class="button">
        <button @click="submitLoginInfo">登录</button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import { toast } from "vant";
import WebIM from "../../utils/WebIM";
export default {
  data() {
    return {
      userId: "",
      password: "",
    };
  },
  computed: {
    // Login.js会创建一个变量 isLogin 存储是否登录的状态,为真:登录, 为假:未登录
    ...mapState({
      isLogin: (state) => state.login.isLogin,
    }),
  },
  watch: {
    // 监视是否登录, 登录则跳转至 '/' 页面
    isLogin(newV) {
      if (newV) {
        this.$router.push({
          path: "/",
        });
      }
    },
  },
  created() {
    // 判断是否存在登录的token
    if (this.$cookies.isKey("wxUserToken")) {
      // 清除tonken
      this.$cookies.remove("wxUserToken");
      WebIM.conn.close();
      this.$store.commit("setIsLogin", false);
    }
    // 退出登录

    // 主要用于从 注册页面跳转过来携带参数
    this.registerRouter();
  },
  methods: {
    // 模块中是否通过验证的函数:isByVerification
    ...mapActions(["isByVerification"]),

    // 点击登录的函数  获取用户的token
    async submitLoginInfo() {
      let tokenData = {
        grant_type: "password",
        username: this.userId,
        password: this.password,
      };

      await this.$axios
        .post(
          "https://a1.easemob.com/1103220930120764/chat-demo/token",
          JSON.stringify(tokenData)
        )
        .then((response) => {
          let option = {
            userId: this.userId,
            password: this.password,
            token: response.data.access_token,
          };
          //   将输入框信息传递到 全局模块中, 进行验证
          this.isByVerification(option);
          toast.success("登录成功");
        })
        .catch(function (error) {
          if (error.response.status == 400) {
            toast.fail("用户名/密码为空或用户未注册");
          } else if (error.response.status == 404) {
            toast.fail("用户名或密码不合法");
          } else if (error.response.status == 401) {
            toast.fail("未授权[无token、token错误、token过期]");
          } else if (
            error.response.status == 429 ||
            error.response.status == 503 ||
            error.response.status.search(/^5[0.1]{2}$/)
          ) {
            toast.fail("接口被限流了，请稍微暂停一下并重试");
          } else {
            toast.fail("appkey or token error");
          }
        });
    },

    // 成功注册完成,跳转至登录页面,将页面的输入框渲染
    registerRouter() {
      if (this.$route.params.isRouterLoginPage) {
        this.userId = this.$route.params.option.userId;
        this.password = this.$route.params.option.password;
      }
    },
    returnRouter() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
#login {
  width: 100vw;

  .close {
    margin: 15px 10px;
    width: 25px;
  }

  h3 {
    text-align: center;
    margin-top: 50px;
    font-size: 22px;
  }

  .table {
    margin-top: 50px;
    width: 100%;
    padding: 0 10px;

    .area {
      padding: 8px 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid rgb(220, 218, 218);

      div span:last-child {
        margin-left: 20px;
      }

      img {
        width: 20px;
      }
    }

    p {
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        margin: 0;
        line-height: 40px;
        padding-right: 50px;
      }

      &:nth-of-type(1) span:nth-child(1) {
        margin-right: 5px;
        border-right: 1px solid rgb(220, 218, 218);
      }

      &:nth-of-type(2) {
        border-top: 1px solid rgb(220, 218, 218);
        border-bottom: 1px solid rgb(220, 218, 218);
      }

      & span:last-child {
        flex: 1;

        input {
          border: 0px;
          outline: 0px;
        }
      }
    }

    .button {
      width: 100%;
      margin-top: 20px;
      text-align: center;

      button {
        width: 90%;
        background-color: var(--theme-freech-green);
        padding: 15px;
        border: 0px solid #000;
        border-radius: 5px;
        color: #fff;
      }
    }
  }
}
</style>